<script>
  import Category from "./components/Category.vue";
  export default {
    name: "App",
    data() {

    },
    components: {
      Category,
    },
    mounted() {
      console.log("Component App:", this.$bus);
    }
  }
</script>

<template>
  <div id="root">
    <Category title="游戏" width="300" height="540">
      <template v-slot:default="slotProps">
        <ul>
          <li v-for="(g, index) in slotProps.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>
    <Category>
      <template v-slot:default="slotProps">
        <ol>
          <li style="color:red;" v-for="(g, index) in slotProps.games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>
    <Category>
      <template v-slot:default="slotProps">
        <h4 v-for="(g, index) in slotProps.games" :key="index">{{g}}</h4>
      </template>
    </Category>
  </div>
</template>

<style>
 #root {
   padding: 20px;
   display: flex;
   justify-content: space-around;
 }
 img {
   width: 100%;
 }
 h4 {
   text-align: center;
 }
</style>